﻿@page "/dialog/resizable"

@using Syncfusion.Blazor.Popups

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the resize operation of the dialog component in all directions. To resize the modal dialog, select and resize a dialog using its handle (grip) or hover on any of the edges or border of the dialog. The "Open" button is used to reopen the dialog if it is closed.</p>
</SampleDescription>
<ActionDescription>
   <p> Users can create resizable modal dialog by setting the <code>EnableResize</code> property to true, which is used to change the size of a dialog dynamically and view its content with expanded mode. The <code>resizeHandles</code> property can also be configured for which directions the dialog should resize. When you configure the <code>Target</code> property along with <code>EnableResize</code> property, the dialog can be resized within its specified target container.</p>
</ActionDescription>

<div class="col-lg-12 control-section" id="target">
    <div>
        @if (this.ShowButton)
        {
            <button class="e-btn" @onclick="@OnClicked">Open</button>
        }
    </div>
    <SfDialog Target="#target" Width="300px" ResizeHandles="@dialogResizeDirections" AllowDragging="true" EnableResize="true" ShowCloseIcon="true" @bind-Visible="Visibility">
        <DialogTemplates>
            <Header> Resize Me!!!</Header>
            <Content> This is a dialog with resizable support. </Content>
        </DialogTemplates>
        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
    </SfDialog>
</div>

<style>
    #target {
        height: 500px;
    }
</style>

@code {
    private bool Visibility { get; set; } = true;
    private bool ShowButton { get; set; } = false;
    private ResizeDirection[] dialogResizeDirections { get; set; } = new ResizeDirection[] { ResizeDirection.All };

    private void DialogOpen(Object args)
    {
        this.ShowButton = false;
    }

    private void DialogClose(Object args)
    {
        this.ShowButton = true;
    }

    private void OnClicked()
    {
        this.Visibility = true;
    }
}